<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/styletext05.css">
    <title>信息采集</title>
</head>

<body>
    <!-- 返回上一级 -->
    <header class="header">
        <a href="./styletext04.html"><img src="./images/arrow-double-left.png" alt=""></a>
    </header>
    <h3>你的色彩偏好</h3>

    <!-- 色彩部分 -->
    <section class="c-style1">
        <p> 暖色系：</p>
        <div class="warm-box">
            <div class="colorbox">
                <div class="bgcbox box3">
                    <img src="./images/圆 (1).png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box3">
                    <img src="./images/圆 (3).png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box3">
                    <img src="./images/圆 (2).png" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="c-style1">
        <p> 冷色系：</p>
        <div class="warm-box">
            <div class="colorbox">
                <div class="bgcbox box1">
                    <img src="./images/圆 (8).png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box1">
                    <img src="./images/圆 (5).png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box1">
                    <img src="./images/圆 (4).png" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="c-style1">
        <p> 中色系：</p>
        <div class="warm-box">
            <div class="colorbox">
                <div class="bgcbox box2">
                    <img src="./images/圆 1.png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box2">
                    <img src="./images/圆 4.png" alt="">
                </div>
            </div>
            <div class="colorbox">
                <div class="bgcbox box2">
                    <img src="./images/圆 (6).png" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- 下一步按钮 -->
    <section class="nextbutton">
        <a href="./styletext06.html"><button id="btn" >下一步</button></a>
    </section>

    <script src="./js/flexible.js"></script>

    <script>
        var tag1 = document.getElementsByClassName('box1')
        for (var i = 0; i < tag1.length; i++) {
            tag1[i].onclick = function() {
                for (var i = 0; i < tag1.length; i++) {
                    tag1[i].style.backgroundColor = '#fff'
                }

                this.style.backgroundColor = '#7cddf6'
            }
        }

        var tag2 = document.getElementsByClassName('box2')
        for (var i = 0; i < tag2.length; i++) {
            tag2[i].onclick = function() {
                for (var i = 0; i < tag2.length; i++) {
                    tag2[i].style.backgroundColor = '#fff'
                }

                this.style.backgroundColor = '#7cddf6'
            }
        }

        var tag3 = document.getElementsByClassName('box3')
        for (var i = 0; i < tag3.length; i++) {
            tag3[i].onclick = function() {
                for (var i = 0; i < tag3.length; i++) {
                    tag3[i].style.backgroundColor = '#fff'
                }

                this.style.backgroundColor = '#7cddf6'
            }
        }

        var btn = document.getElementById('btn')
        btn.onclick = function() {
            this.style.backgroundColor = '#f2f4f7'
        }
    </script>

</body>



</html>